<template>
	<div class="activeDropdown">
		<h3>Dropdown 下拉菜单</h3>
		<div class="dropdown1">
			<h4>基础用法</h4>
			<el-dropdown>
				<span class="el-dropdown-link">
    				下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>北京</el-dropdown-item>
					<el-dropdown-item>上海</el-dropdown-item>
					<el-dropdown-item>天津</el-dropdown-item>
					<el-dropdown-item disabled>深圳</el-dropdown-item>
				</el-dropdown-menu>

			</el-dropdown>
		</div>

		<div class="dropdown2">
			<h4>触发对象</h4>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-dropdown>
						<el-button type="primary">
							更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>北京</el-dropdown-item>
							<el-dropdown-item>上海</el-dropdown-item>
							<el-dropdown-item>天津</el-dropdown-item>
							<el-dropdown-item disabled>深圳</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
				<el-col :span="12">
					<el-dropdown split-button type="primary" @click="handleClick">
						更多菜单
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>黄金糕</el-dropdown-item>
							<el-dropdown-item>狮子头</el-dropdown-item>
							<el-dropdown-item>螺蛳粉</el-dropdown-item>
							<el-dropdown-item>双皮奶</el-dropdown-item>
							<el-dropdown-item>蚵仔煎</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
			</el-row>
		</div>

		<div class="dropdown3">
			<h4>触发方式</h4>
			<el-row class="block-col-2">
				<el-col :span="12">
					<p class="demonstration">hover 激活</p>
					<el-dropdown>
						<span class="el-dropdown-link">
					        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
					    </span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>黄金糕</el-dropdown-item>
							<el-dropdown-item>狮子头</el-dropdown-item>
							<el-dropdown-item>螺蛳粉</el-dropdown-item>
							<el-dropdown-item>双皮奶</el-dropdown-item>
							<el-dropdown-item>蚵仔煎</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
				<el-col :span="12">
					<p class="demonstration">click 激活</p>
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
					        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
					    </span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>黄金糕</el-dropdown-item>
							<el-dropdown-item>狮子头</el-dropdown-item>
							<el-dropdown-item>螺蛳粉</el-dropdown-item>
							<el-dropdown-item>双皮奶</el-dropdown-item>
							<el-dropdown-item>蚵仔煎</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
			</el-row>
		</div>

		<div class="dropdown4">
			<h4>指令事件</h4>
			<el-dropdown @command="handleCommand">
				<span class="el-dropdown-link">
				    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="a">黄金糕</el-dropdown-item>
					<el-dropdown-item command="b">狮子头</el-dropdown-item>
					<el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
					<el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
					<el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			handleClick() {
				alert('button click');
			},
			handleCommand(command) {
				this.$message('click on item ' + command);
			}
		}

	}
</script>

<style>

</style>